/*
 * @Author: 江舟 jijiangzhou@recycloud.cn
 * @Date: 2024-03-26 14:06:13
 * @LastEditors: 江舟 jijiangzhou@recycloud.cn
 * @LastEditTime: 2024-07-03 13:41:50
 * @FilePath: \vite-project\src\components\menu\MenuForm.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */

import { Form, Input, Radio, type RadioChangeEvent, TreeSelect, Select } from 'antd';
import { useContext, useEffect, useState } from 'react';
import { CommonDrawerContext } from '../common/CommonDrawer';
import ImageUpload from '@/components/common/ImageUploader';
import ChoosePath from '../common/ChoosePath';

interface MenuFormProps {
    appId?: string | null;
    treeData: any[];
    parentId?: string;
}

const MenuForm: React.FC<MenuFormProps> = ({ treeData, parentId }) => {
    const { form } = useContext(CommonDrawerContext);
    const type = Form.useWatch('type', form); // 菜单类型
    const module = Form.useWatch('module', form); // 菜单属性
    const [options, setOption] = useState<
        {
            label: string;
            value: string;
        }[]
    >([]);
    const [lastMenuType, setLastMenuType] = useState<number>(); // 上级菜单类型
    const onChange = (type: number) => {
        switch (type) {
            case 1: {
                // 目录
                const filepath = form?.getFieldValue('filepath');
                form?.setFieldValue('filepath', filepath || 'BaseLayout');
                form?.setFieldValue('showTag', 0);
                setOption([
                    {
                        label: '一级目录',
                        value: 'BaseLayout',
                    },
                    {
                        label: '二级目录',
                        value: 'DefaultLayout',
                    },
                ]);
                break;
            }
            default: {
                const filepath = form?.getFieldValue('filepath');
                form?.setFieldValue('filepath', filepath);
            }
        }
    };
    // 上级菜单类型设置
    const handleLastMenuType = (parentId: string) => {
        const node = treeToArray(treeData).find((item) => item.id === parentId);
        if (node) {
            setLastMenuType(node.type);
        }
    };
    // 树形结构转数组
    const treeToArray = (tree: any[]): any[] =>
        tree.reduce((res: any[], item: any) => {
            const { children, ...i } = item;
            return res.concat(i, children && children.length ? treeToArray(children) : []);
        }, []);
    useEffect(() => {
        const type = form?.getFieldValue('type');
        const module = form?.getFieldValue('module');
        const showTag = form?.getFieldValue('showTag');
        type && onChange(type);
        form?.setFieldValue('parentId', parentId);
        form?.setFieldValue('module', module || 1);
        type === 2 && form?.setFieldValue('showTag', showTag || 0);
        module === 2 && form?.setFieldValue('filepath', void 0);
        parentId && handleLastMenuType(parentId);
    }, [treeData]);
    return (
        <>
            {parentId ? (
                <Form.Item name='parentId' label='上级菜单' rules={[{ required: true, message: '请选择上级菜单' }]}>
                    <TreeSelect
                        treeDefaultExpandAll
                        placeholder='请选择上级菜单'
                        treeData={treeData}
                        onSelect={(value: string, node: any) => {
                            // 上级菜单类型
                            setLastMenuType(node.type);
                        }}
                        treeNodeFilterProp='label'
                        allowClear
                        fieldNames={{
                            label: 'label',
                            value: 'id',
                        }}
                        showSearch
                    />
                </Form.Item>
            ) : null}

            <Form.Item name='type' label='菜单类型' rules={[{ required: true, message: '请选择菜单类型' }]}>
                <Radio.Group onChange={(e) => onChange(e.target.value)}>
                    <Radio value={1}>目录</Radio>
                    <Radio value={2}>菜单</Radio>
                    <Radio value={3}>按钮</Radio>
                </Radio.Group>
            </Form.Item>
            <Form.Item name='label' label='菜单名称' rules={[{ required: true, message: '请输入菜单名称' }]}>
                <Input placeholder='请输入菜单名称' />
            </Form.Item>
            <Form.Item name='module' label='菜单属性' rules={[{ required: true, message: '请输入菜单属性' }]}>
                <Select
                    placeholder='请选择菜单属性'
                    options={[
                        {
                            value: 1,
                            label: 'PC端',
                        },
                        {
                            value: 2,
                            label: '移动端',
                        },
                    ]}
                />
            </Form.Item>
            <Form.Item name='power' label='权限标识' rules={[{ required: true, message: '请输入权限标识' }]}>
                <Input placeholder='请输入权限标识' />
            </Form.Item>

            <Form.Item name='path' label='访问路径' rules={[{ required: true, message: '请输入访问路径' }]}>
                {module === 2 ? <ChoosePath /> : <Input placeholder='请输入访问路径' />}
            </Form.Item>

            <Form.Item name='showTag' label='是否隐藏' rules={[{ required: true, message: '请选择是否隐藏' }]}>
                <Radio.Group>
                    <Radio value={0}>可见</Radio>
                    <Radio value={1}>不可见</Radio>
                </Radio.Group>
            </Form.Item>

            {type != 3 && module === 1 ? (
                <Form.Item name='filepath' label='文件路径' rules={[{ required: true, message: '请输入文件路径' }]}>
                    {type === 1 ? <Select options={options} placeholder='请选择文件路径' /> : <Input placeholder='请输入文件路径' />}
                </Form.Item>
            ) : null}

            <Form.Item name='sortNo' label='排序值'>
                <Input type='number' min={0} placeholder='请输入排序值' />
            </Form.Item>
            {module === 1 ? (
                <Form.Item name='icon' label='图标'>
                    <Input placeholder='请输入菜单图标标识' />
                </Form.Item>
            ) : (
                <>
                    <Form.Item name='shortcut' label='是否为快捷链接' rules={[{ required: true, message: '请选择是否为快捷链接' }]}>
                        <Radio.Group>
                            <Radio value={0}>否</Radio>
                            <Radio value={1}>是</Radio>
                        </Radio.Group>
                    </Form.Item>
                    <Form.Item name='pictureId' label='上传图标'>
                        <ImageUpload maxCount={1} maxFileSize={2} />
                    </Form.Item>
                </>
            )}
        </>
    );
};

export default MenuForm;
